<template>
	<view class="inviteFriends">
		<u-navbar title="邀请好友" title-size="36" title-color="#333333"></u-navbar>
		
		<view class="invite-section">
			<view class="dtail-header">
				<view class="header-info">
					<image v-if="userInfo.avatar" :src="userInfo.avatar" class="detail-img" mode=""></image>
					<image v-else src="../../static/user_logo.png" class="detail-img" mode=""></image>
					<view class="user-info">
						<text style="font-size: bold">{{ userInfo.nickname }}</text>
						<view class="user_level">
							<i class="icon icon_level"></i>LV{{ userInfo.userLevel }}
						</view>
					</view>
				</view>
			</view>
			<view class="swiper-bottom">
				<view class="swiper-option">
					<view class="grid-num">{{ currDayAdd }}</view>
					<view class="grid-text">今日新增</view>
				</view>
				<view class="swiper-option">
					<view class="grid-num">{{ currMonthAdd }}</view>
					<view class="grid-text">本月新增</view>
				</view>
				<view class="swiper-option">
					<view class="grid-num">{{ friendCount }}</view>
					<view class="grid-text">好友人数</view>
				</view>
			</view>
		</view>
		
		<view class="invite-list">
			<view class="nearby">
				<u-divider half-width="80" color="#999999" fontSize="32" borderColor="#DDDDDD">邀请好友</u-divider>
			</view>
			
			<template v-if="dataShow">
				<view class="invite-item" v-for="(item, index) in dataList" :key="index">
					<view class="invite-userInfo">
						<image v-if="item.invitedAvatar" :src="item.invitedAvatar" class="invite-img" mode=""></image>
						<image v-else src="../../static/user_logo.png" mode=""></image>
						<view class="username">
							<text style="font-weight: 500; line-height: 48rpx;">{{ item.invitedNickname }}</text>
							<text class="user-time">{{ $u.timeFormat(item.registerTime, 'yyyy.mm.dd hh:mm') }}</text>
						</view>
					</view>
					<view class="invite-type">
						<text class="coin">+{{ item.goldCoinChangeCount }}金币</text>
						<text class="register" v-if="item.registerTime">已注册</text>
					</view>
				</view>
			</template>
			<view v-else>
				<empty type="empty" message="暂时没有邀请记录，赶快邀请吧！" :showButton="false" />
			</view>
			
			<view class="invite-btn" :class="config.SW_SHOW_POSTER == 1 ? 'widthStyle' : null">
				<!-- @click="inviteShare" -->
				<button type="default" class="invite_coin friends" @click="inviteShare" open-type="share">邀请好友</button>
				<button type="default" class="invite_coin" v-if="config.SW_SHOW_POSTER == 1" @click="onPoster">生成海报</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
import empty from '../../components/empty.vue'
export default {
	components: {
		empty
	},
	data() {
		return {
			dataShow: true,
			pageInfo: {
				currentPage: 1,
				pageSize: 10,
				pageCount: 0,
			},
			currDayAdd: 0,
			currMonthAdd: 0,
			friendCount: 0,
			dataList: []
		}
	},
	computed: {
		...mapState(['userInfo', 'isLoginStatus', 'appId', 'config']),
	},
	// onShareAppMessage(res) {
	// 	if (res.from === 'button') {// 来自页面内分享按钮
	// 		console.log(res.target)
	// 	}
	// 	return {
	// 		title: '自定义分享标题',
	// 		path: '/pages/test/test?id=123',
	// 		success: (suc) => {
	// 			console.log('weixin success:' + JSON.stringify(suc))
	// 		},
	// 		fail: (err) => {
	// 			console.log('weixin err:' + JSON.stringify(err))
	// 		},
	// 		complete: (e) => {
	// 			console.log('weixin complete:' + JSON.stringify(e))
	// 		}
	// 	}
	// },
	onLoad(options) {
		console.log(options)
		this.__init()
	},
	onReachBottom() {
		// console.log('bottom')
		let pageInfo = this.pageInfo
		if(pageInfo.currentPage < pageInfo.totalPage) {
			pageInfo.currentPage = pageInfo.currentPage + 1
			this.__init()
		}
	},
	methods: {
		__init() {
			uni.showLoading()
			this.$u.get('/paopao/mini/user/queryInviteRecord', this.pageInfo).then(res => {
				this.dataList.push(...res.pageRespVO.items)
				this.pageInfo.totalPage = res.totalPage
				if(this.dataList.length > 0) {
					this.dataShow = true
				} else {
					this.dataShow = false
				}
				uni.hideLoading()
			})
		},
		onPoster() {
			this.$u.route('/pages/inviteFriends/invitePoster')
		},
		inviteShare() {
			console.log(true)
			uni.share({
				provider: "weixin",  
				scene: 'WXSceneSession',    // WXSceneSession/WXSenceTimeline/WXSceneFavorite  
				imageUrl: 'https://www.hesongzhineng.com/img/javafile/20210821103944-dc3a824a-bb88-4781-834d-83d7911129c3.png',  
				type: 5,
				title: '好友邀请你来一起玩',
				// summary: spaceDetail.spaceBriefIntroduction,
				miniProgram: {
					id: 'wx2959a675e140ffec',
					path: '/pages/tabbar/home?businessParamType=51&userId' + this.userInfo.id,
					type: '1'
				},
				success: (res) => {  
					console.log("weixin == success:" + JSON.stringify(res));  
				},  
				fail: (err) => {  
					console.log("weixin == fail:" + JSON.stringify(err));  
				}  
			})
		}
	}
}
</script>

<style lang="less" scoped>
@import url("../../common/css/var.less");
.icon {
	width: 32rpx;
	height: 32rpx;
	display: inline-block;
}
.icon_level {
	background: url(../../static/user/icon_level_white.png) no-repeat center;
	background-size: contain;
	margin-right: 8rpx;
}
.inviteFriends {
	background-color: #F7F7F7;
	height: calc(100vh - 44px - var(--status-bar-height));
}
.invite-section {
	background: #FFFFFF;
	box-shadow: 0rpx 20rpx 60rpx rgba(0, 0, 0, 0.05);
	opacity: 1;
	border-radius: 32rpx;
	padding: 50rpx 32rpx 32rpx;
	margin: 32rpx;
	.dtail-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: @tText;
	}
	
	.user_level {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 8rpx 16rpx;
		background-color: @blueColor;
		border-radius: 24rpx;
		color: #FFFFFF;
		font-size: 24rpx;
	}
	
	.header-info {
		display: flex;
		align-items: center;
		flex-basis: 100%;
		image {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			overflow: hidden;
			// margin-right: 24rpx;
		}
		.user-info {
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			font-size: 32rpx;
			color: @mText;
			margin-left: 24rpx;
			text {
				padding-bottom: 8rpx;
			}
		}
	}
	.header-fire {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-basis: 25%;
		font-size: 28rpx;
		line-height: 32rpx;
		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}
	}
	.detail-content {
		padding-top: 32rpx;
		color: @mText;
		font-size: 32rpx;
	}
	.swiper-bottom {
		margin-top: 32rpx;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.swiper-option {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: @tText;
		font-size: 24rpx;
		.grid-num {
			font-size: 40rpx;
			color: @mText;
		}
	}
}
.nearby {
	padding: 0 0 24rpx;
}
.invite-list {
	background: #FFFFFF;
	box-shadow: 0rpx 20rpx 60rpx rgba(0, 0, 0, 0.05);
	opacity: 1;
	border-radius: 32rpx;
	padding: 32rpx 32rpx;
	margin: 32rpx 32rpx 180rpx;
}
.invite-item {
	padding: 32rpx 0 16rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.invite-img {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
	}
	.invite-userInfo, .username {
		display: flex;
		align-items: center;
	}
	.username {
		padding-left: 8rpx;
		flex-direction: column;	
		align-items: flex-start;
		font-size: 32rpx;
		color: @mText;
		.user-time {
			padding-top: 8rpx;
			font-size: 24rpx;
			color: @tText;
			line-height: 40rpx;
		}
	}
	.invite-type {
		display: flex;
		align-items: center;
		flex-direction: column;
		font-size: 32rpx;
		color: @mText;
		.register {
			font-size: 24rpx;
			color: @blueColor;
			padding: 4rpx 16rpx;
			border-radius: 40rpx;
			background: #F1EAFF;
			margin-top: 8rpx;
		}
	}
}
.invite-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 24rpx 32rpx;
	border-top: 2rpx solid #E6E6E6;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #FFFFFF;
	&.widthStyle .invite_coin {
		width: 48% !important;
	}
	.invite_coin {
		width: 100%;
		line-height: 96rpx;
		background: #FED034 !important;
		box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.06);
		border-radius: 48rpx;
		color: @mText;
		font-size: 36rpx;
		&.friends {
			background: #FFF9D5 !important;
			color: @orangeColor;
		}
	}
}
</style>
